<template>
<div class="score-analysis-container">
  <div class="header">
    <div class="back-button">
      <el-button style="width: 100px;height: 30px;" plain :icon="ArrowLeft" type="primary" size="small" @click="goBack">返回上一页</el-button>
    </div>
    <div class="exam-info">
      <el-card class="info-card">
        <div class="info-grid">
          <div class="info-item">
            <div class="info-label">考试名称</div>
            <div class="info-value">{{ examination?.examinationName }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">考试时间</div>
            <div class="info-value">
             开始时间： {{ examination?.startTime }} <br>
             结束时间： {{ examination?.endTime }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">试卷满分</div>
            <div class="info-value">{{ examination?.fullMark }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">平均分</div>
            <div class="info-value">{{ examination?.avgScore }}</div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="class-select">
      目前展示班级：
      <el-select
        v-model="selectedClassesIdOfSA"
        collapse-tags
        collapse-tags-tooltip
        placeholder="请选择班级"
        @change="handleClassesChange"
        size="default"
        class="class-selector"
      >
        <el-option
          v-for="item in classesInfoOfSA"
          :key="item.classesId"
          :label="item.classesName"
          :value="item.classesId"
        >
        </el-option>
      </el-select>
    </div>
  </div>

  <div class="charts-section">
    <el-card shadow="hover" class="chart-card">
      <template #header>
        <div class="card-header">
          <span>成绩分布图</span>
        </div>
      </template>
      <v-chart class="chart" :option="option" autoresize />
    </el-card>

    <el-card shadow="hover" class="chart-card">
      <template #header>
        <div class="card-header">
          <span>知识点掌握情况</span>
        </div>
      </template>
      <v-chart class="chart" :option="optionOfKp" autoresize @click="handleChartClick"/>
    </el-card>
  </div>

  <div class="data-section">
    <el-card shadow="hover" class="data-card">
      <template #header>
        <div class="card-header">
          <span>成绩分布表</span>
        </div>
      </template>
      <page-list
        :isShowPagination="false"
        :total="studentScoreOfSA.length"
        :tableData="studentScoreOfSA"
      >
        <el-table-column label="排名" type="index" width="80" />
        <el-table-column label="班级" prop="classesName" />
        <el-table-column label="姓名" prop="studentName" />
        <el-table-column label="成绩" prop="score" />
      </page-list>
    </el-card>

    <el-card shadow="hover" class="data-card">
      <template #header>
        <div class="card-header">
          <span>试题质量分析表</span>
          <el-button style="width: 100px;height: 30px;" plain type="warning" size="small"  @click="exportAbnormalQuestion" :icon="Download">导出异常题目</el-button>
        </div>
      </template>
      <page-list
        :isShowPagination="false"
        :total="questionQualityData.length"
        :tableData="questionQualityData"
      >
        <el-table-column label="序号" type="index" width="60" />
        <el-table-column label="试题名称" prop="questionName" />
        <el-table-column label="所属大题" prop="bigQuestionName" />
        <el-table-column label="所属知识点" prop="knowledgePointName" />
        <el-table-column label="满分" prop="maxScore" width="80" />
        <el-table-column label="平均分" prop="averageScore" width="80" />
        <el-table-column label="难度系数" prop="difficultyCoefficient" width="100" />
        <el-table-column label="是否异常" width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.isAbnormal" type="danger" effect="light">是</el-tag>
            <el-tag v-else type="success" effect="light">否</el-tag>
          </template>
        </el-table-column>
      </page-list>
    </el-card>
  </div>
</div>
</template>

<script setup>
import { useScoreAnalysisExport } from '@/hooks/server/useScoreAnalysisExport'; 
import { useRoute } from 'vue-router';
import { ref, onMounted } from 'vue';
import VChart from 'vue-echarts'
import { ArrowLeft, Download } from '@element-plus/icons-vue'

const route = useRoute()
const { 
  goBack,
  examinationIdOfSA,
  selectedClassesIdOfSA,
  classesInfoOfSA,
  waitAllApi,
  handleClassesChange,
  examination,
  studentScoreOfSA,
  chartData,
  option,
  handleChartChange,
  kpData,
  optionOfKp,
  questionQualityData,
  exportAbnormalQuestion
 } = useScoreAnalysisExport()

onMounted(async () => {
  examinationIdOfSA.value = route.query.examinationId
  await waitAllApi()
})

// 点击事件
const handleChartClick = (params) => {
  console.log('点击知识点:', kpData.value[params.dataIndex]);
};
</script>

<style scoped lang="scss">
// 全局样式重置
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; 
}

// 主容器
.score-analysis-container {  
  width: 100%;
  height: 100vh;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #f5f7fa;
  overflow: auto;
}

// 头部区域
.header {
  display: flex;
  gap: 20px;
  align-items: center;
  

  
  .exam-info {
    flex: 2;
    
    .info-card {
      background-color: #fff;
      
      .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        
        .info-item {
          
          .info-label {
            font-size: 14px;
            color: #909399;
            margin-bottom: 4px;
          }
          
          .info-value {
            width: 400px;
            
            font-size: 16px;
            font-weight: 500;
            color: #303133;
          }
        }
      }
    }
  }
  
  .class-select {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    
    .class-selector {
      width: 100%;
      max-width: 300px;
    }
  }
}

// 图表区域
.charts-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  
  @media (max-width: 1200px) {
    grid-template-columns: 1fr;
  }
  
  .chart-card {
    .card-header {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
    }
    
    .chart {
      height: 300px;
      width: 100%;
    }
  }
}

// 数据区域
.data-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  
  @media (max-width: 1200px) {
    grid-template-columns: 1fr;
  }
  
  .data-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
      font-weight: 500;
      color: #303133;
    }
  }
}

// 卡片公共样式
.el-card {
  border-radius: 8px;
  border: none;
  transition: box-shadow 0.3s;
  

}

// 表格样式美化
:deep(.el-table) {
  --el-table-header-bg-color: #f2f6fc;
  
  .el-table__header th {
    font-weight: 500;
    color: #606266;
  }
}

// 标签样式
:deep(.el-tag) {
  border-radius: 4px;
  padding: 2px 8px;
}
</style>
